<template>
	<view class="content">

		<view class="input-group">
			
			<image src="../../static/images/theme.png" mode="" class="logo"></image>
			<view class="input-row">

				<m-input class="m-input" type="text" clearable focus v-model="account" placeholder="请输入账号"></m-input>
			</view>
			<view class="input-row">

				<m-input type="password" displayable v-model="pwd" placeholder="请输入密码"></m-input>
				
			</view>
			<view class="action-row">
				<navigator url="../reg/reg">注册账号</navigator>

				<navigator url="../pwd/pwd">忘记密码</navigator>
			</view>
		</view>
		<view class="btn-row">
			<button type="primary" class="primary" @tap="bindLogin">登录</button>
		</view>


	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mInput from '../../components/m-input.vue'

	export default {
		components: {
			mInput
		},
		data() {
			return {
				account: '',
				pwd: '',
			}
		},
		computed: {  
			...mapState(['user_name', 'logined', 'password'])  
		},  
		onShow() {
				// this.globalLogin();
				// console.log(this.logined);
		},
		methods: {
			...mapMutations(['globalLogin','globalLogout']),

			bindLogin() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				if (this.account.length < 5) {
					uni.showToast({
						icon: 'none',
						title: '账号最短为 5 个字符'
					});
					return;
				}
				if (this.pwd.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 6 个字符'
					});
					return;
				}
				/**
				 * 下面简单模拟下服务端的处理
				 * 检测用户账号密码是否在已注册的用户列表中
				 * 实际开发中，使用 uni.request 将账号信息发送至服务端，客户端在回调函数中获取结果信息。
				 */
				const msg = {
					user_name: this.account,
					password: this.pwd
				};
				
				uniCloud.callFunction({
					name:'test',//云函数名称
					data:msg,
					success: (res) => {
						let data=res.result;
						let status=data.status;
						console.log(msg);
						console.log(data);
						if(status==0){
							uni.showToast({
								icon: 'none',
								title: '用户不存在'
							});
							
						}else if(status==1){
							uni.showToast({
								icon: 'none',
								title: '密码错误'
							});
						}else if(status==2){
							uni.showToast({
								icon: 'none',
								title: '成功登录'
							});
							this.toMain(msg);
						}
						
					},fail: (msg) => {
						console.log(msg);
					},
					complete: (m) => {
						console.log('在执行');
					}
				});
			},
			
			toMain(user) {
				this.globalLogin(user);

				uni.reLaunch({
					url: '../main/main',
				});

			}
		},

	}
</script>

<style>
	.logo{
		margin-left: 44%;
		margin-top:11%;
		margin-bottom: 3%;
		width: 110px;
		height:90px;
	}
	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		
		margin-top: 7%;
	}
	.forget{
		margin-top: 7%;
	}
	.forget-nav{
		margin-left: 70%;
	}
	.top-nav{
		width: 107%;
		height: 40px;
		margin-left: -3%;
		margin-top: -3%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background: #FFFFFF;
	}
	.top-nav navigator {
		color: #2478fc;
		font-size: 20px;
		padding: 0 10px;
	}
	.action-row navigator {
		color: #007aff;
		padding: 0 10px;
	}

	.oauth-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.oauth-image {
		position: relative;
		width: 50px;
		height: 50px;
		border: 1px solid #dddddd;
		border-radius: 50px;
		margin: 0 20px;
		background-color: #ffffff;
	}

	.oauth-image image {
		width: 30px;
		height: 30px;
		margin: 10px;
	}

	.oauth-image button {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
</style>
